<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>创建Canvas</title>
</head>
<body>
<!--不要使用css指定canvas大小-->
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa; display: block;margin: 100px auto">
  如果浏览器不支持canvas，就会显示该文本
</canvas>
<script>
  var canvas = document.getElementById('canvas')

  // 可以使用
  canvas.width = 1024
  canvas.height = 768

  var context = canvas.getContext('2d')  // 使用context上下文来操作canvas

  // 绘制一条直线
  context.moveTo(100,100)
  context.lineTo(700,700)
  // ... 可以继续绘制

  context.lineWidth = 5 // 设置绘制的宽度
  context.strokeStyle = "#005588"  // 设置绘制的颜色
  context.stroke()
</script>
</body>
</html>
